﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Classify.aspx.cs" Inherits="Token.Piker.Web.Classify" %>

<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
<%@ Register TagPrefix="uc" TagName="Head" Src="~/uc/head.ascx" %>
<%@ Register TagPrefix="uc" TagName="Footer" Src="~/uc/foot.ascx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>分类相册</title>
    <link href="css/reset.css" rel="stylesheet" />
    <link href="css/uc.css" rel="stylesheet" type="text/css" />
    <link href="css/classify.css" rel="stylesheet" />
    <link href="css/login.css" rel="stylesheet" type="text/css" />
    <link href="js/fancyapps-fancyBox/source/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script src="js/fancyapps-fancyBox/lib/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="js/fancyapps-fancyBox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
</head>
<body>
    <uc:Head ID="ucHead" runat="server" />
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
        <div class="wrap">
            <div class="switch">
                <h1>
                    <asp:LinkButton ID="lkbPhoto" runat="server" Text="单张" CssClass="selected_switch" OnClick="lkbPhoto_Click"></asp:LinkButton><span class="switch_img_holder"></span><asp:LinkButton ID="lkbAlbum" runat="server" Text="组图" OnClick="lkbAlbum_Click" CssClass="not_selected_switch"></asp:LinkButton></h1>
            </div>
            <div class="left_side">
                <ul class="parent_ul">
                    <li class="parent_li">
                        <asp:LinkButton ID="lkbAllTags" runat="server" Text="全部" OnClick="lkbAllTags_Click"></asp:LinkButton></li>
                    <li class="parent_li">
                        <asp:LinkButton ID="lkbContentTags" runat="server" Text="内容" OnClick="lkbContentTags_Click"></asp:LinkButton>
                        <ul class="children_ul">
                            <asp:Repeater ID="rptContentTags" runat="server" OnItemCommand="Tags_ItemCommand">
                                <ItemTemplate>
                                    <li class="children_li">
                                        <asp:LinkButton ID="lkbContentTag" runat="server" Text='<%# Eval("TagName") %>' CommandArgument='<% #Eval("ID")%>' CommandName="ChangeTag"></asp:LinkButton></li>
                                </ItemTemplate>
                            </asp:Repeater>
                        </ul>
                    </li>
                    <li class="parent_li">
                        <asp:LinkButton ID="lkbStyleTags" runat="server" Text="风格" OnClick="lkbStyleTags_Click"></asp:LinkButton>
                        <ul class="children_ul">
                            <asp:Repeater ID="rptStyleTags" runat="server" OnItemCommand="Tags_ItemCommand">
                                <ItemTemplate>
                                    <li class="children_li">
                                        <asp:LinkButton ID="lkbStyleTag" runat="server" Text='<%# Eval("TagName") %>' CommandArgument='<%# Eval("ID") %>' CommandName="ChangeTag"></asp:LinkButton></li>
                                </ItemTemplate>
                            </asp:Repeater>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="right_side">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional" RenderMode="Block">
                    <ContentTemplate>
                        <div class="img_list_holder">
                            <asp:Repeater ID="rptPhotoList" runat="server">
                                <ItemTemplate>
                                    <div class="imgbox">
                                        <div class="list_img_holder">
                                            <img alt="" src='<%# ResolveClientUrl(string.Format("~/AJAX/Thumbnail.ashx?width=160&height=160&pid={0}", Eval("ID"))) %>'  onmouseover ="showMask(this);" onmouseout ="hideMask(this)" />
                                        </div>
                                        <div class="mask" style="display: none;">
                                            <a href='<%# string.Format("SingleByPID.aspx?PID={0}",Eval("ID")) %>'>
                                                <%# Eval("Descrip") %><br />
                                                <label>作者：</label><%# GetUsernameByID(Eval("UserID")) %><br />
                                                上传于<%# Convert.ToDateTime(Eval("UploadTime")).ToLongDateString() %>
                                            </a>
                                        </div>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                            <asp:Repeater ID="rptAlbumList" runat="server">
                                <ItemTemplate>
                                    <div class="imgbox">
                                        <div class="list_img_holder">
                                            <img alt="" src='<%# ResolveClientUrl(Eval("CoverURL").ToString()) %>'  onmouseover ="showMask(this);" onmouseout ="hideMask(this)" />
                                        </div>
                                        <div class="mask" style="display: none;">
                                            <a href='<%# string.Format("Album.aspx?id={0}",Eval("ID")) %>'>
                                                <%# Eval("AlbumName") %><br />
                                                <%# Eval("Descrip") %><br />
                                                <label>作者：</label><%# GetUsernameByID(Eval("UserID")) %><br />
                                                创建于<%# Convert.ToDateTime(Eval("CreateTime")).ToLongDateString() %>
                                            </a>
                                        </div>
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                            <div style="height: 0; clear: both;"></div>
                        </div>
                        <div class="pager">
                            <webdiyer:AspNetPager ID="pagerList" runat="server" NumericButtonCount="6"
                                UrlPaging="true" NumericButtonTextFormatString="[{0}]" CustomInfoHTML=" 第 <font color='red'><b>%CurrentPageIndex%</b></font> 页 共 %PageCount% 页 显示 %StartRecordIndex%-%EndRecordIndex% 条"
                                ShowCustomInfoSection="left" FirstPageText="首页" LastPageText="末页" NextPageText="下页"
                                PrevPageText="上页" Font-Names="Arial" AlwaysShow="true" ShowInputBox="Always"
                                SubmitButtonText="跳转" OnPageChanged="pagerList_PageChanged" PageSize="15" ReverseUrlPageIndex="True">
                            </webdiyer:AspNetPager>
                        </div>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="lkbPhoto" EventName="Click" />
                        <asp:AsyncPostBackTrigger ControlID="lkbAlbum" EventName="Click" />
                        <asp:AsyncPostBackTrigger ControlID="lkbAllTags" EventName="Click" />
                        <asp:AsyncPostBackTrigger ControlID="lkbContentTags" EventName="Click" />
                        <asp:AsyncPostBackTrigger ControlID="lkbStyleTags" EventName="Click" />
                        <asp:AsyncPostBackTrigger ControlID="rptContentTags" EventName="ItemCommand" />
                        <asp:AsyncPostBackTrigger ControlID="rptStyleTags" EventName="ItemCommand" />
                    </Triggers>
                </asp:UpdatePanel>
            </div>
            <div style="clear: both; height: 0;"></div>
        </div>
    </form>
    <uc:Footer ID="ucFoot" runat="server" />
    <!---登录区域--->
    <div id="div_login" style="display: none">
        <div id="div_login_title">
            <h2>登录到皮壳网</h2>
        </div>
        <div id="login_content">
            <p>
                <label for="userName">
                    用户名：</label>
                <input class="text" type="text" name="username" id="username" />
            </p>
            <p>
                <label for="password">
                    密码：</label>
                <input class="text" type="password" name="password" id="password" />
            </p>
            <p>
                <input class="button" type="button" value="登录" id="btnSubmit" />
                <a id="anchor_create_account" href="Register.aspx">没有账号？立即注册</a>
            </p>
        </div>
    </div>
    <!---登录区域结束--->
    <script src="js/login.js" type="text/javascript"></script>
    <script type="text/javascript">
        //以下封装对图片进行处理
        function DrawImage(img, W, H) {
            var width = $(img).width();
            var height = $(img).height();
            if (width / height >= W / H) {
                if (width > W) {
                    $(img).height(H);
                    width = width * H / height;
                    $(img).width(width);
                    var margin = (W - width) / 2;
                    $(img).css("margin-left", margin).css("margin-right", margin);
                }
            } else {
                if (height > H) {
                    $(img).width(W);
                    height = height * W / width;
                    $(img).height(height);
                    var margin = (H - height) / 2;
                    $(img).css("margin-top", margin).css("margin-bottom", margin);
                }
            }
        }

        //底层公用
        var iBase = {
            Id: function (name) {
                return document.getElementById(name);
            },
            //设置元素透明度,透明度值按IE规则计,即0~100
            SetOpacity: function (ev, v) {
                ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
            }
        }

        //淡入效果(含淡入到指定透明度)
        function fadeIn(elem, speed, opacity) {
            /*
             * 参数说明
             * elem==>需要淡入的元素
             * speed==>淡入速度,正整数(可选)
             * opacity==>淡入到指定的透明度,0~100(可选)
             */
            speed = speed || 20;
            opacity = opacity || 100;
            //显示元素,并将元素值为0透明度(不可见)
            elem.style.display = 'block';
            iBase.SetOpacity(elem, 0);
            //初始化透明度变化值为0
            var val = 0;
            //循环将透明值以5递增,即淡入效果
            (function () {
                iBase.SetOpacity(elem, val);
                val += 5;
                if (val <= opacity) {
                    setTimeout(arguments.callee, speed)
                }
            })();
        }

        //淡出效果(含淡出到指定透明度)
        function fadeOut(elem, speed, opacity) {
            /*
             * 参数说明
             * elem==>需要淡入的元素
             * speed==>淡入速度,正整数(可选)
             * opacity==>淡入到指定的透明度,0~100(可选)
             */
            speed = speed || 20;
            opacity = opacity || 0;
            //初始化透明度变化值为0
            var val = 100;
            //循环将透明值以5递减,即淡出效果
            (function () {
                iBase.SetOpacity(elem, val);
                val -= 5;
                if (val >= opacity) {
                    setTimeout(arguments.callee, speed);
                } else if (val < 0) {
                    //元素透明度为0后隐藏元素
                    elem.style.display = 'none';
                }
            })();
        }

        function showMask(img) {
            var ele = img.parent.getElementsByTagName("div");
            fadeIn(ele[1]);
        }

        function hideMask(img) {
            var ele = img.parent.getElementsByTagName("div");
            fadeOut(ele[1]);
        }

        $(document).ready(function () {
            $("#lkbPhoto").click(function () {
                $(this).removeClass("not_selected_switch").addClass("selected_switch");
                $("#lkbAlbum").removeClass("selected_switch").addClass("not_selected_switch");
                $(".switch_img_holder").css("background-position", "left bottom");
                $(".children_ul li").removeClass("children_li_selected").addClass("children_li");
            });

            $("#lkbAlbum").click(function () {
                $(this).removeClass("not_selected_switch").addClass("selected_switch");
                $("#lkbPhoto").removeClass("selected_switch").addClass("not_selected_switch");
                $(".switch_img_holder").css("background-position", "left top");
                $(".children_ul li").removeClass("children_li_selected").addClass("children_li");
            });

            $(".children_li").click(function () {
                $(".children_ul li").removeClass("children_li_selected").addClass("children_li");
                $(this).removeClass("children_li").addClass("children_li_selected");
            });

            $(".list_img_holder img").load(function () {
                DrawImage(this, 160, 160);
            });
        });
    </script>
</body>
</html>
